var _CONFIG = {
    JQXGRID: '#jqx_grid_view',
    BINDING_URI: base_url + 'so/order/binding/',
    tBINDING_URI: base_url + 'so/order/binding_table'
    
};
var _SO = (function() {
    var datafields = [
        {name: 'OrderID', type: 'int'},
        {name: 'CustomerID'},
        {name: 'ShipName'},
        {name: 'ShipAddress'},
        {name: 'ShipCity'},
        {name: 'ShipCountry'},
        {name: 'OrderDate', type: 'date'},
        {name: 'Freight', type: 'float'}
    ];
    var columns = [
        {text: 'OrderID'        , dataField: 'OrderID'      ,cellsalign: 'right'},
        {text: 'CustomerID'     , dataField: 'CustomerID'   },
        {text: 'ShipName'       , dataField: 'ShipName'     },
        {text: 'ShipAddress'    , dataField: 'ShipAddress'  },
        {text: 'ShipCity'       , dataField: 'ShipCity'     },
        {text: 'ShipCountry'    , dataField: 'ShipCountry'  },
        {text: 'Freight'        , dataField: 'Freight'      ,cellsalign: 'right'},
        {text: 'OrderDate'      , dataField: 'OrderDate'    ,cellsalign: 'right',cellsformat:'yyyy-MM-dd HH:mm:ss',filtertype:"date"}
    ];
    var oTable;
    var that = this;
    return {
        createtable :   function(){
             oTable = $('#data_table').dataTable({
                aaSorting: [],
                aoColumns: [
                    {
                        mData: "OrderID",sWidth: "58px",sClass:'',
                        mRender: function ( value, type, datarow ) {
                            var str = "";
                            str += '<span class="icon-pencil" title="Edit:'+value+'" style="padding-right:12px" onclick="_GALLERY.EditItemIn(' + value + ');"></span>';
                            str += '<span class="icon-trash" title="Delete:'+value+'" style="padding-right:12px" onclick="_GALLERY.DeleteItem(' + value + ');"></span>';

                            return str;
                        }
                    },
                    {mData: "CustomerID"},
                    {mData: "Freight"},
                    {mData: "OrderDate"},
                    {mData: "ShipName"},
                    {mData: "ShipAddress"},
                    {mData: "ShipCity"},
                    {mData: "ShipRegion"},
                    {mData: "ShipPostalCode"},
                    {mData: "ShipCountry"}
                ],
                sServerMethod: "POST",
                iDisplayLength: 20,
                bProcessing: true,
                bServerSide: true,
                sAjaxSource: _CONFIG.tBINDING_URI,
                bJQueryUI: false,
                bAutoWidth: false,
                sPaginationType: "full_numbers",
                //sDom": '<"datatable-header"fl>t<"datatable-footer"ip>',
                oLanguage: {
                    "sSearch": "<span>Filter records:</span> _INPUT_",
                    "sLengthMenu": "<span>Show entries:</span> _MENU_",
                    "oPaginate": {"sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<"}
                }
            });
            oTable.fnSetFilteringDelay(2000);
        },
        creategrid  :   function(){
            var source = {
                datatype: "json", type: "POST",
                datafields: datafields,
                url: _CONFIG.BINDING_URI,
                filter: function() {
                    $(_CONFIG.JQXGRID).jqxGrid('updatebounddata', 'filter');
                },
                sort: function() {
                    $(_CONFIG.JQXGRID).jqxGrid('updatebounddata');
                },
                root: 'rows',
                beforeprocessing: function(data) {
                    
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadError: function(xhr, status, error) {
                    bckdialog({type: 'error'}).open("<b>Status</b>:" + xhr.status + "<br/><b>ThrownError</b>:" + error + "<br/>", 'Error Message!');
                }
            });
            $(_CONFIG.JQXGRID).jqxGrid({
                width: '100%', //autoheight:true,
                //height: '100%',
                source: dataAdapter,
                theme: theme, sortable: true,
                filterable: true,
                autoshowfiltericon: true,
                showfilterrow: true,
                editable: true,
                //rowsheight:34,
                showemptyrow: true,
                columns: columns,
                selectionmode: 'singlecell',
                editmode: 'dblclick',
                virtualmode: true,
                groupable: true,
                rendergridrows: function(){ return dataAdapter.records; },
                pageable: true,
                pagesize: 100,
                pagesizeoptions: ['100', '200', '500', '1000'],
                ready: function() {
                    var $refresh = $('<div type="button"  title="Refresh" style="margin-left: 0px;padding:0 4px; float: left; cursor: pointer;height:15px;"><img src="/libraries/images/16/view_refresh.png"/></div>');
                    var $option = $('<div type="button"  title="Refresh" style="margin-left: 0px;padding:0 4px; float: left; cursor: pointer;height:15px;"><img src="/libraries/images/16/option.gif"/></div>');
                    var $add = $('<div type="button"  title="Add" style="margin-left: 4px;padding:0 4px; float: left; cursor: pointer;height:15px;"><img src="/libraries/images/16/add_1.png"/></div>');
                    $refresh.click(function(){
                        $(_CONFIG.JQXGRID).jqxGrid('updatebounddata');
                    });
                    $option.prependTo($(_CONFIG.JQXGRID+' .jqx-grid-pager>div'));
                    $refresh.prependTo($(_CONFIG.JQXGRID+' .jqx-grid-pager>div'));
                    $add.prependTo($(_CONFIG.JQXGRID+' .jqx-grid-pager>div'));
                    
                },
            });
        },
        onInit  :   function(){
            this.creategrid();
            this.createtable();
        }
    };
}());
